mochawesome
Advanced tools
The mochawesome npm package is a custom reporter for use with the testing framework, Mocha. It generates a full-fledged HTML/CSS report that helps visualize test runs. It also supports JSON output for additional report processing and integration with other tools.
Beautiful Test Reports
This feature allows you to generate a standalone HTML document that visually displays the results of your Mocha tests. The command above runs Mocha tests using mochawesome as the reporter.
mocha test --reporter mochawesomeCustom Report Options
Mochawesome provides several options to customize the report. You can specify the directory and filename for the report, among other options. The code sample demonstrates how to set a custom directory and filename for the report.
mocha test --reporter mochawesome --reporter-options reportDir=customReport,reportFilename=reportSupport for Mocha Hooks
Mochawesome supports Mocha's hooks such as before, after, beforeEach, and afterEach. These hooks can be used to set up preconditions and clean up after tests. The code sample shows a test suite with before and after hooks.
describe('My Suite', () => { before(() => { // setup code }); it('does something', () => { // test code }); after(() => { // teardown code }); });Screenshots on Test Failure
Mochawesome allows you to add context to the test reports, such as screenshots, especially useful when a test fails. The code sample demonstrates adding a screenshot to the report context if a condition is met.
it('should capture a screenshot on failure', function () { browser.url('https://example.com'); if (browser.isExisting('.should-not-exist')) { this.addContext('Screenshot on failure', browser.saveScreenshot()); } expect(browser.isExisting('.should-not-exist')).to.be.false; });This package is similar to mochawesome in that it is also a reporter for Mocha. It generates reports in JUnit format, which is useful for integration with systems like Jenkins. Unlike mochawesome's rich HTML reports, mocha-junit-reporter focuses on XML output for CI servers.
mocha-multi-reporters allows you to use multiple Mocha reporters simultaneously. This is useful if you need to generate different types of reports from a single test run. It provides more flexibility compared to mochawesome, which is a single-reporter solution.
allure-mocha is a reporter that integrates with the Allure reporting framework. It provides detailed reports with features like test categorization, rich test data visualization, and history trends. Allure-mocha offers a more comprehensive reporting solution compared to mochawesome's straightforward HTML reports.
Mochawesome is a custom reporter for use with the Javascript testing framework, mocha. It runs on Node.js (>=4) and works in conjunction with mochawesome-report-generator to generate a standalone HTML/CSS report to helps visualize your test runs.
npm install --save-dev mochawesome
mocha testfile.js --reporter mochawesome
var mocha = new Mocha({
reporter: 'mochawesome'
});
Mochawesome generates the following inside your project directory:
mochawesome-report/
├── assets
│ ├── app.css
│ ├── app.js
│ ├── MaterialIcons-Regular.woff
│ ├── MaterialIcons-Regular.woff2
│ ├── roboto-light-webfont.woff
│ ├── roboto-light-webfont.woff2
│ ├── roboto-medium-webfont.woff
│ ├── roboto-medium-webfont.woff2
│ ├── roboto-regular-webfont.woff
│ └── roboto-regular-webfont.woff2
├── mochawesome.html
└── mochawesome.json
The two main files to be aware of are:
mochawesome.html - The rendered report file
mochawesome.json - The raw json output used to render the report
Options can be passed to the reporter in two ways.
The reporter will try to read environment variables that begin with MOCHAWESOME_.
$ export MOCHAWESOME_REPORTFILENAME=customReportFilename
Note that environment variables must be in uppercase.
You can pass comma-separated options to the reporter via mocha's --reporter-options flag. Options passed this way will take precedence over environment variables.
$ mocha test.js --reporter mochawesome --reporter-options reportDir=customReportDir,reportFilename=customReportFilename
Alternately, reporter-options can be passed in programatically:
var mocha = new Mocha({
reporter: 'mochawesome',
reporterOptions: {
reportFilename: 'customReportFilename',
quiet: true
}
});
The options below are specific to the reporter. For a list of all available options see mochawesome-report-generator options.
| Option Name | Type | Default | Description |
|---|---|---|---|
quiet | boolean | false | Silence console messages |
reportFilename | string | mochawesome | Filename of saved report Applies to the generated html and json files. |
html | boolean | true | Save the HTML output for the test run |
json | boolean | true | Save the JSON output for the test run |
Mochawesome ships with an addContext helper method that can be used to associate additional information with a test. This information will then be displayed inside the report.
Please note: arrow functions will not work with addContext. See the example.
addContext(testObj, context)| param | type | description |
|---|---|---|
| testObj | object | The test object |
| context | string|object | The context to be added to the test |
Context as a string
Simple strings will be displayed as is. If you pass a URL, the reporter will attempt to turn it into a link. If the URL links to an image or video, it will be shown inline.
Context as an object
Context passed as an object must adhere to the following shape:
{
title: 'some title' // must be a string
value: {} // can be anything
}
Be sure to use ES5 functions and not ES6 arrow functions when using addContext to ensure this references the test object.
const addContext = require('mochawesome/addContext');
describe('test suite', function () {
it('should add context', function () {
// context can be a simple string
addContext(this, 'simple string');
// context can be a url and the report will create a link
addContext(this, 'http://www.url.com/pathname');
// context can be an image url and the report will show it inline
addContext(this, 'http://www.url.com/screenshot-maybe.jpg');
// context can be an object with title and value properties
addContext(this, {
title: 'expected output',
value: {
a: 1,
b: '2',
c: 'd'
}
});
})
});
It is also possible to use addContext from within a beforeEach or afterEach test hook.
describe('test suite', () => {
beforeEach(function () {
addContext(this, 'some context')
});
afterEach(function () {
addContext(this, {
title: 'afterEach context',
value: { a: 1 }
});
});
it('should display with beforeEach and afterEach context', () => {
// assert something
});
});
mochawesome is MIT licensed.
FAQs
A gorgeous reporter for Mocha.js
The npm package mochawesome receives a total of 1,253,249 weekly downloads. As such, mochawesome popularity was classified as popular.
We found that mochawesome demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PyPI confirms no security flaws were exploited in the Ultralytics supply chain attack and highlights improvements for safer package publishing.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.